<template>
  <a-list size="small" bordered :data-source="list">
    <template v-slot:renderItem="{ item, index }">
      <a-list-item>{{ item }}</a-list-item>
    </template>
  </a-list>
  <br>
  <a-textarea
    v-model:value="data.comment"
    placeholder="你的留言"
    :auto-size="{ minRows: 6 }"
  />

  <div style="text-align: right; margin-top: 10px;">
    <a-button type="default" @click="handleGotoCourses">
      进入课程
    </a-button>
    <a-button type="primary" @click="handleClick">
      提交
    </a-button>
  </div>
</template>

<script lang="ts">
import { reactive, ref, onMounted, computed, watchEffect, defineComponent } from 'vue'
import { useStore } from '../../store/index'
import { useRouter } from 'vue-router'

interface Data {
  comment: string
}

export default defineComponent({
  
  setup() {
    const { dispatch, state } = useStore()
    const { push } = useRouter()

    const list = ref(state.list)
    const data = reactive<Data>({
      comment: ''
    })

    watchEffect(() => {
      list.value = state.list
    })

    const handleGotoCourses = () => {
      push('/courses')
    }

    const handleClick = () => {
      dispatch('changList', data.comment)
    }

    onMounted(() => {
      dispatch('loadData')
    })

    return {
      list,
      data,
      handleGotoCourses,
      handleClick
    }
  }
})
</script>